<template>
    <div id="home-banner">
        <div class="home-banner">
            <el-carousel height="500px">
                <el-carousel-item v-for="item in bannerLisr" :key="item.id"><!-- item.hrefUrl -->
                    <router-link to="/">
                        <img  v-img-lazy="item.imgUrl" alt="">
                    </router-link>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
    
<script setup>
import { getBannerAPI } from '@/apis/home'
import { ref, onMounted } from 'vue';
/* 轮播图数据 */
const bannerLisr = ref([])
const getBannerCategoty = async () => {
    const { data: res } = await getBannerAPI()
    /* 对获取到的数据进行校验 */
    if (res.code != 1) new Promise.reject('获取失败')
    bannerLisr.value = res.result
}
onMounted(() => getBannerCategoty())
</script>
    
<style scoped lang='scss'>
#home-banner {
    margin-top: 50px;

    .home-banner {
        width: 1240px;
        height: 500px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 98;

        img {
            width: 100%;
            height: 500px;
        }

    }
}
</style>